Next.js（Pages Router）と Hono を使用したストリーミング処理の実装注意点

import { useState } from "react";

export default function Home() {
  const [message, setMessage] = useState("");
  const [chatHistory, setChatHistory] = useState<
    { type: "user" | "assistant"; content: string }[]
  >([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!message.trim() || isLoading) return;

    // ユーザーのメッセージをチャット履歴に追加
    setChatHistory((prev) => [...prev, { type: "user", content: message }]);

    setIsLoading(true);
    // 新しいアシスタントの返信用に空のメッセージを追加
    setChatHistory((prev) => [...prev, { type: "assistant", content: "" }]);

    try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ message }),
      });

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      const reader = response.body?.getReader();
      if (!reader) {
        throw new Error("No reader available");
      }

      const decoder = new TextDecoder();

      try {
        while (true) {
          const { done, value } = await reader.read();

          if (done) {
            break;
          }

          const text = decoder.decode(value);
          // チャット履歴の最後のメッセージ（アシスタントの返信）を更新
          setChatHistory((prev) => {
            const newHistory = [...prev];
            const lastMessage = newHistory[newHistory.length - 1];
            if (lastMessage.type === "assistant") {
              lastMessage.content += text;
            }
            return newHistory;
          });
        }
      } finally {
        reader.releaseLock();
      }
    } catch (error) {
      console.error("Error:", error);
      setChatHistory((prev) => {
        const newHistory = [...prev];
        const lastMessage = newHistory[newHistory.length - 1];
        if (lastMessage.type === "assistant") {
          lastMessage.content = "エラーが発生しました。";
        }
        return newHistory;
      });
    } finally {
      setIsLoading(false);
      setMessage(""); // 入力フィールドをクリア
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 p-4">
      {/* ヘッダー */}
      <header className="max-w-4xl mx-auto mb-4">
        <h1 className="text-2xl font-bold text-gray-800">AI Chat Assistant</h1>
      </header>

      <div className="max-w-4xl mx-auto h-[calc(100vh-8rem)] bg-white rounded-xl shadow-lg flex flex-col">
        {/* 初期メッセージ */}
        {chatHistory.length === 0 && (
          <div className="flex-1 flex flex-col items-center justify-center p-4 space-y-4 text-center">
            <h2 className="text-2xl font-semibold text-gray-800">
              AIアシスタントへようこそ！
            </h2>
            <p className="text-gray-600 max-w-md">
              なんでも質問してください。できる限り丁寧にお答えします。
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8 w-full max-w-2xl">
              <div className="bg-gray-50 p-4 rounded-lg">
                <h3 className="font-medium text-gray-800 mb-2">例えば...</h3>
                <ul className="text-gray-600 text-sm space-y-2">
                  <li>「今日の天気について教えて」</li>
                  <li>「プログラミングについて質問があります」</li>
                  <li>「おすすめの本を教えて」</li>
                </ul>
              </div>
              <div className="bg-gray-50 p-4 rounded-lg">
                <h3 className="font-medium text-gray-800 mb-2">使い方</h3>
                <ul className="text-gray-600 text-sm space-y-2">
                  <li>• Enterキーで送信</li>
                  <li>• Shift + Enterで改行</li>
                  <li>• 質問は具体的に書くとより良い回答が得られます</li>
                </ul>
              </div>
            </div>
          </div>
        )}

        {/* チャット履歴 */}
        {chatHistory.length > 0 && (
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {chatHistory.map((chat, index) => (
              <div
                key={index}
                className={`flex ${
                  chat.type === "user" ? "justify-end" : "justify-start"
                }`}
              >
                <div
                  className={`rounded-lg p-3 max-w-[80%] ${
                    chat.type === "user"
                      ? "bg-blue-500 text-white"
                      : "bg-gray-200 text-gray-800"
                  }`}
                >
                  {chat.content}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* 入力フォーム */}
        <form onSubmit={handleSubmit} className="border-t border-gray-200 p-4">
          <div className="flex space-x-4">
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyDown={(e) => {
                if (
                  e.key === "Enter" &&
                  !e.shiftKey &&
                  !e.nativeEvent.isComposing
                ) {
                  e.preventDefault();
                  handleSubmit(e);
                }
              }}
              placeholder="メッセージを入力..."
              disabled={isLoading}
              rows={1}
              className="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 text-gray-800 resize-none min-h-[44px] max-h-[200px] overflow-y-auto"
              style={{ lineHeight: "1.5" }}
            />
            <button
              type="submit"
              disabled={isLoading}
              className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:bg-gray-400 transition-colors duration-200"
            >
              {isLoading ? "送信中..." : "送信"}
            </button>
          </div>
          <div className="mt-2 text-xs text-gray-500 text-right">
            Shift + Enter で改行
          </div>
        </form>
      </div>
    </div>
  );
}